<template>
    <div style="height: 40px; width: 100%">
        <el-row
            type="flex"
            justify="space-between"
            align="middle"
            style="height: 40px; width: 100%"
          >
            <el-col :span="20">
              <span>{{ treeNode.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row
               type="flex"
               justify="end"
              >
                <el-col >{{treeNode.manager}}</el-col>
                <el-col>
                  <el-dropdown @command="operateDepts">
                    <span> 操作<i class="el-icon-arrow-down"></i> </span>
                    <el-dropdown-menu slot="dropdown" >
                      <el-dropdown-item command="add" >添加子部门</el-dropdown-item>
                      <el-dropdown-item v-if="!isRoot" command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
    </div>
</template>

<script>
    import { delDepartments } from "@/api/departments" 
    export default {
        props: {
            treeNode: {
              type:Object,
              require: true
            },
            isRoot: {
              type: Boolean,
              default: false
            }
        },
        data() {
          return {

          }
        },
        methods: {
          operateDepts (command) {
            if (command === "add") {
               // 添加子部门
              this.$emit("addDepts", this.treeNode)
            } else if (command === "edit") {
              // 编辑
              this.$emit("editDepts", this.treeNode)
            } else {
              // 删除
              this.$confirm("确定要删除该部门吗？")
              .then(() => {
                return delDepartments(this.treeNode.id)
              })
              .then(() => {
                this.$emit("delDepts");
                this.$message({
                  type:'success',
                  message: "已删除成功"
                })
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                })
              })
            }
          }
        }
    }
</script>

<style scoped>

</style>